<template>
 <a-layout>
    <a-layout-header>
        <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane  :tab="item.label" v-for="(item) in tabList" :key="item.value"></a-tab-pane>
        </a-tabs>
    </a-layout-header>
    <a-layout-content>
         <component :is="activeKey"></component>
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import ISeniorSearch from './components/ISeniorSearch.vue'
import IForm from './components/IForm.vue'
import ITree from './components/ITree.vue'
import IDialog from './components/IDialog.vue'
import ITable from './components/ITable.vue'
import ITabs from './components/ITabs.vue'
export default defineComponent({
  name: 'app',
  setup () {
    const activeKey = ref<string>('ISeniorSearch')
    const tabList = [
      {
        label: '高级搜索',
        value: 'ISeniorSearch'
      },
      {
        label: '树形',
        value: 'ITree'
      },
      {
        label: '弹出框',
        value: 'IDialog'
      },
      {
        label: '表单',
        value: 'IForm'
      },
      {
        label: 'ITabs',
        value: 'ITabs'
      },
      {
        label: 'ITable',
        value: 'ITable'
      }
    ]
    return {
      tabList,
      activeKey
    }
  },
  components: {
    ITable,
    ITabs,
    ITree,
    IForm,
    IDialog,
    ISeniorSearch
  }
})
</script>
<style>
html,body,#app{
    width:100%;
    height:100%;
    overflow: hidden;
    background: #ffffff;
}
.ant-layout-header{
    background: #ffffff;
}
</style>
